---
title: 'Calendar configuration - calendars option'
description: 'Learn how to configure the Schedule-X calendar to use multiple calendars'
---

# Calendars

The events of a single calendar can be sorted into different categories, called calendars.

## Configuration

Each calendar needs a name, which is then referenced as `calendarId` in the events. The name can be freely chosen,
as long as it can be used a JavaScript object key as in the example below, where we have the calendars `personal`,
`work`, `leisure` and `school`. The value of `colorName` can only contain lower key characters, since this will
internally be used as part of a custom CSS property.

You do not need to define colors for dark- and light mode unless you use them both.

## Example

```js
const config = {
  // ... other configuration
  calendars: {
    personal: {
      colorName: 'personal',
      lightColors: {
        main: '#f9d71c',
        container: '#fff5aa',
        onContainer: '#594800',
      },
      darkColors: {
        main: '#fff5c0',
        onContainer: '#fff5de',
        container: '#a29742',
      },
    },
    work: {
      colorName: 'work',
      lightColors: {
        main: '#f91c45',
        container: '#ffd2dc',
        onContainer: '#59000d',
      },
      darkColors: {
        main: '#ffc0cc',
        onContainer: '#ffdee6',
        container: '#a24258',
      },
    },
    leisure: {
      colorName: 'leisure',
      lightColors: {
        main: '#1cf9b0',
        container: '#dafff0',
        onContainer: '#004d3d',
      },
      darkColors: {
        main: '#c0fff5',
        onContainer: '#e6fff5',
        container: '#42a297',
      },
    },
    school: {
      colorName: 'school',
      lightColors: {
        main: '#1c7df9',
        container: '#d2e7ff',
        onContainer: '#002859',
      },
      darkColors: {
        main: '#c0dfff',
        onContainer: '#dee6ff',
        container: '#426aa2',
      },
    },
  },
  events: [
    // ... other events
    {
      title: "Meeting with Mr. boss",
      start: Temporal.ZonedDateTime.from('2024-01-05T05:15:00+01:00[Europe/Berlin]'),
      end: Temporal.ZonedDateTime.from('2024-01-05T06:00:00+01:00[Europe/Berlin]'),
      id: "98d85d98541f",
      calendarId: "work"
    }, {
      title: "Sipping Aperol Spritz on the beach",
      start: Temporal.ZonedDateTime.from('2024-01-05T12:00:00+01:00[Europe/Berlin]'),
      end: Temporal.ZonedDateTime.from('2024-01-05T15:20:00+01:00[Europe/Berlin]'),
      id: "0d13aae3b8a1",
      calendarId: "leisure"
    },
  ]
}
```
